import React from 'react';
import {
  Button,  ListGroup, Nav, NavItem, Tab
} from 'react-bootstrap';

import '../../content/styles/Selector.less';
import {setData} from  './createFlowTask/data.js';

export default class Keywords extends React.Component {
  state = {
    selected:0,
    value:""
  }

  optionClicked(idx, value){
    if (idx !== this.state.selected){
      this.setState({
        selected:idx
      });
      this.props.onChange({
        idx:idx,
        value:value.value
      })
    }
  }

  render(){
    return  <div>
      <div className = "selector-container">
        <div className = "float-left">
          {this.props.title}
        </div>
        {this.props.options.map((v, idx)=>{
          let cn = "float-left " + (idx===this.state.selected?"selected":"notselected");
          return <div key = {idx} className = {cn} onClick = {e=>this.optionClicked(idx, v)}>{v.text}</div>
        })}
      </div>
      <div className = "clearboth"/>
    </div>
  }
}